	<div class="ninja trainee-info">
		<p class="trainee-info-section"><?php echo json_encode($info); ?></p>
		<p class="country-section"><?php echo json_encode($countries); ?></p>
		<p class="locality-section"><?php echo json_encode($localities); ?></p>
		<p class="district-section"><?php echo json_encode($districts); ?></p>
		<p class="educational-level-section"><?php echo json_encode($educationalLevels); ?></p>
	</div>

	<div class="row trainee-info-section" data-trainee-id="<?php echo $traineeId; ?>">
		<!--
		<div class="col-md-1">
		</div>
		-->
		<div class="col-md-2">
			<img class="img-rounded center-block trainee-image" src="<?php echo base_url(); ?>img/bro.png" alt="Trainee Image" data-bind="click: browseImage, attr: { src: image }, event: { mouseover: imageHoverIn }">
		</div>
		<div class="col-md-10">
			<div class="panel-group" id="account-info-accordion">
				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title"><a data-toggle="collapse" data-parent="#account-info-accordion" href="#account-info-pane">Account Information</a></h3>
					</div>

					<div id="account-info-pane" class="panel-collapse collapse fade in">
						<div class="panel-body">
							<div class="row field-row">
								<div class="col-md-3">
									<p class="bold">Username</p>
									<div class="form-group" data-bind="css: { 'has-error' : userName.hasError }">
									  <input type="text" class="data-input form-control username-field" placeholder="Username..." data-bind="value: userName, valueUpdate: 'afterkeydown'">
									</div>
								</div>
								<div class="col-md-9">
									
								</div>
							</div>

							<div class="row field-row leading-row field-last-row">
								<div class="col-md-3">
									<p class="bold">Password</p>
									<div class="form-group" data-bind="css: { 'has-error' : password1.hasError }">
									  <input type="password" class="data-input form-control user-password1" placeholder="Password..." data-bind="value: password1, valueUpdate: 'afterkeydown'">
									</div>
								</div>
								<div class="col-md-3">
									<p class="bold">Re-type Password</p>
									<div class="form-group" data-bind="css: { 'has-error' : password2.hasError }">
									  <input type="password" class="data-input form-control user-password2" placeholder="Re-type Password..." data-bind="value: password2, valueUpdate: 'afterkeydown'">
									</div>
								</div>
								<div class="col-md-6">
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="panel-group" id="personal-info-accordion">
				<div class="panel panel-info">
				  <div class="panel-heading">
				    <h3 class="panel-title"><a data-toggle="collapse" data-parent="#personal-info-accordion" href="#personal-info-pane">Personal Information</a></h3>
				  </div>

				  <div id="personal-info-pane" class="panel-collapse collapse fade in">
					  	<div class="panel-body">
					   		<div class="row field-row">
								<div class="col-md-3">
									<p class="bold">Gender</p>
									<select class="data-input form-control" data-bind="options: genders,
																					   optionsText: function(gender) {
																							return gender.text;
																					    },
																					   optionsValue: function(gender) {
																								return gender.value;
																					    },
																                       value: gender,
																                       valueAllowUnset: true"></select>					
								</div>
								<div class="col-md-9">
									
								</div>
							</div>
							
							<div class="row field-row leading-row">
								<div class="col-md-3">
									<p class="bold">First Name</p>
									<div class="form-group" data-bind="css: { 'has-error' : firstName.hasError }">
									  <input type="text" class="data-input form-control" placeholder="Given name..." data-bind="value: firstName, valueUpdate: 'afterkeydown'">
									</div>
								</div>

								<div class="col-md-3">
									<p class="bold">Middle Name</p>
									<div class="form-group" data-bind="css: { 'has-error' : middleName.hasError }">
									  <input type="text" class="data-input form-control" placeholder="Middle name..." data-bind="value: middleName, valueUpdate: 'afterkeydown'">
									</div>
								</div>

								<div class="col-md-3">
									<p class="bold">Last Name</p>
									<div class="form-group" data-bind="css: { 'has-error' : lastName.hasError }">
									  <input type="text" class="data-input form-control" placeholder="Surname..." data-bind="value: lastName, valueUpdate: 'afterkeydown'">
									</div>
								</div>

								<div class="col-md-3">
								</div>
							</div>

							<div class="row field-row leading-row">
								<div class="col-md-3">
									<p class="bold">Birth Date</p>
									<input type="text" class="data-input form-control" placeholder="Birth date..." data-bind="value: birthDate, valueUpdate: 'afterkeydown'">
								</div>

								<div class="col-md-3">
									<p class="bold">Age</p>
									<input type="text" class="data-input form-control" placeholder="Age..." data-bind="value: age" disabled>
								</div>

								<div class="col-md-3">
									<p class="bold">Marital Status</p> 
									<select class="data-input form-control" data-bind="options: statusList,
																                       value: maritalStatus,
																                       valueAllowUnset: true"></select>					
								</div>

								<div class="col-md-3">
									
								</div>
							</div>

							<div class="row field-row leading-row field-last-row">
								<div class="col-md-3">
									<p class="bold">Nationality / Native Country</p> 
									<select class="data-input form-control" data-bind="options: countries,
																					   optionsText: function(country) {
																							return country.country;
																					    },
																					   optionsValue: function(country) {
																								return country.id;
																					    },
																                       value: nationality,
																                       valueAllowUnset: true"></select>					
								</div>

								<div class="col-md-3">
									<p class="bold">Locality</p>
									<div class="form-group" data-bind="css: { 'has-error' : locality.hasError }">
										<select class="data-input form-control" data-bind="options: localities,
																						   optionsText: function(locality) {
																								return locality.locality;
																						    },
																						   optionsValue: function(locality) {
																									return locality.id;
																						    },
																	                       value: locality,
																	                       valueAllowUnset: true"></select>
									</div>					
								</div>

								<div class="col-md-3">
									<p class="bold">District</p>
									<div class="form-group" data-bind="css: { 'has-error' : district.hasError }">
										<select class="data-input form-control district-field" data-bind="options: districts,
																									      optionsText: function(district) {
																											   return district.district;
																									      },
																									      optionsValue: function(district) {
																											   return district.id;
																									      },
																				                          value: district,
																				                          valueAllowUnset: true"></select>					
									</div>
								</div>

								<div class="col-md-3">
									
								</div>
							</div>
					  </div>
					</div>
				  </div>
				  	
			</div>
			
			<div class="panel-group" id="contact-info-accordion">
				<div class="panel panel-info">
				  <div class="panel-heading">
				    <h3 class="panel-title"><a data-toggle="collapse" data-parent="#contact-info-accordion" href="#contact-info-pane">Contact Information</a></h3>
				  </div>

				  <div id="contact-info-pane" class="panel-collapse collapse fade in">
					<div class="panel-body">
					    <div class="row field-row">
							<div class="col-md-3">
								<p class="bold">Home Phone No.</p>
								<input type="text" class="data-input form-control" placeholder="Phone number..." data-bind="value: phoneNo, valueUpdate: 'afterkeydown'">
							</div>

							<div class="col-md-3">
								<p class="bold">Mobile No.</p>
								<div class="form-group" data-bind="css: { 'has-error' : mobileNo.hasError }">
								  <input type="text" class="data-input form-control" placeholder="Mobile number..." data-bind="value: mobileNo, valueUpdate: 'afterkeydown'">
								</div>
							</div>
							
							<div class="col-md-4">
								<p class="bold">Email Address</p>
								<div class="form-group" data-bind="css: { 'has-error' : email.hasError }">
								  <input type="text" class="data-input form-control" placeholder="Email address..." data-bind="value: email, valueUpdate: 'afterkeydown'">
								</div>
							</div>

							<div class="col-md-2">
								
							</div>					
					    </div>
					  </div>
				  </div>
				</div>	
			</div>
			
			<div class="panel-group" id="residence-info-accordion">
				<div class="panel panel-info">
				  <div class="panel-heading">
				    <h3 class="panel-title"><a data-toggle="collapse" data-parent="#residence-info-accordion" href="#residence-info-pane">Residential Information</a></h3>
				  </div>

				  <div id="residence-info-pane" class="panel-collapse collapse fade in">
					<div class="panel-body">
					    <a href="#add-address" class="btn btn-success add-trainee-adress-button" data-bind="click: addAddress"><span class="glyphicon glyphicon-plus"></span> Add Residential Address</a>
					 </div>

					 <table class="table residence-table">
					 	<thead>
					 		<tr>
					 			<th class="table-col">Country</th>
					 			<th class="table-col">Unit No.</th>
					 			<th class="table-col">Street</th>
					 			<th class="table-col">Subdivision</th>
					 			<th class="table-col">Area</th>
					 			<th class="table-col">Locality</th>
					 			<th class="data-option-col"><th>
					 		</tr>
					 	</thead>
					 	<tbody data-bind="foreach: addresses">
					 		<tr>
					 			<td>
					 				<div class="form-group" data-bind="css: { 'has-error' : country.hasError }">
										  <select class="data-input form-control" data-bind="options: countries,
																							 optionsText: function(country) {
																								return country.country;
																							 },
																							 optionsValue: function(country) {
																								return country.id;
																							 },
																		                     value: country,
																		                     valueAllowUnset: true"></select>
									</div>
					 			</td>
					 			<td>
					 				<div class="form-group" data-bind="css: { 'has-error' : unitNo.hasError }">
									  <input type="text" class="data-input form-control" placeholder="Unit number..." data-bind="value: unitNo, valueUpdate: 'afterkeydown'">
									</div>
					 			</td>
					 			<td>
					 				<div class="form-group" data-bind="css: { 'has-error' : street.hasError }">
									  <input type="text" class="data-input form-control" placeholder="Street..." data-bind="value: street, valueUpdate: 'afterkeydown'">
									</div>
					 			</td>
					 			<td>
					 				<input type="text" class="data-input form-control" placeholder="Subdivision..." data-bind="value: subdivision, valueUpdate: 'afterkeydown'">
					 			</td>
					 			<td>
					 				<div class="form-group" data-bind="css: { 'has-error' : area.hasError }">
									  <input type="text" class="data-input form-control" placeholder="Area..." data-bind="value: area, valueUpdate: 'afterkeydown'">
									</div>
					 			</td>
					 			<td>
					 				<div class="form-group" data-bind="css: { 'has-error' : locality.hasError }">
										  <select class="data-input form-control" data-bind="options: localities,
																							 optionsText: function(locality) {
																								return locality.locality;
																							 },
																							 optionsValue: function(locality) {
																								return locality.id;
																							 },
																		                     value: locality,
																		                     valueAllowUnset: true"></select>
									</div>
					 			</td>
					 			<td>
					 				<a href="#remove" class="remove-record" data-bind="click: $root.removeAddress"><span class="glyphicon glyphicon-remove"></span></a>
					 			</td>
					 		</tr>
					 	</tbody>
					 </table> 
				  </div>
				</div>
			</div>

			<div class="panel-group" id="education-info-accordion">
				<div class="panel panel-info">
					<div class="panel-heading">
					    <h3 class="panel-title"><a data-toggle="collapse" data-parent="#education-info-accordion" href="#education-info-pane">Educational Background</a></h3>
					</div>

					<div id="education-info-pane" class="panel-collapse collapse fade in">
						<div class="panel-body">
						    <a href="#add-address" class="btn btn-success add-trainee-education-button" data-bind="click: addEducation"><span class="glyphicon glyphicon-plus"></span> Add Education</a>
						</div>

						<table class="table education-table">
							<thead>
								<tr>
									<th class="table-col">Level</th>
									<th class="table-col">School / Institution</th>
									<th class="table-col">Course</th>
									<th class="table-col">Attended</th>
									<th class="table-col">Graduated</th>
									<th class="data-option-col"></th>
								</tr>
							</thead>

							<tbody data-bind="foreach: educations">
								<tr>
									<td>
										<div class="form-group" data-bind="css: { 'has-error' : educationalDegree.hasError }">
										  <select class="data-input form-control" data-bind="options: educationalDegrees,
																							 optionsText: function(level) {
																								return level.educationalDegree;
																							 },
																							 optionsValue: function(level) {
																								return level.id;
																							 },
																		                     value: educationalDegree,
																		                     valueAllowUnset: true"></select>
										</div>	
									</td>
									<td>
						 				<div class="form-group" data-bind="css: { 'has-error' : school.hasError }">
										  <input type="text" class="data-input form-control" placeholder="School..." data-bind="value: school, valueUpdate: 'afterkeydown'">
										</div>
						 			</td>
									<td>
										<input type="text" class="data-input form-control" placeholder="Course..." data-bind="value: course, valueUpdate: 'afterkeydown'">
									</td>
									<td>
										<div class="form-group" data-bind="css: { 'has-error' : monthAttended.hasError }">
										  <select class="data-input form-control" data-bind="options: months,
																							 optionsText: function(month) {
																								return month.month;
																							 },
																							 optionsValue: function(month) {
																								return month.id;
																							 },
																		                     value: monthAttended,
																		                     valueAllowUnset: true"></select>
										</div>
										<div class="form-group year-dropdown-container" data-bind="css: { 'has-error' : yearAttended.hasError }">
										  <select class="data-input form-control" data-bind="options: years,
																		                     value: yearAttended,
																		                     valueAllowUnset: true"></select>
										</div>
									</td>
									<td>
										<div class="form-group" data-bind="css: { 'has-error' : monthGraduated.hasError }">
										  <select class="data-input form-control" data-bind="options: months,
																							 optionsText: function(month) {
																								return month.month;
																							 },
																							 optionsValue: function(month) {
																								return month.id;
																							 },
																		                     value: monthGraduated,
																		                     valueAllowUnset: true"></select>
										</div>
										<div class="form-group year-dropdown-container" data-bind="css: { 'has-error' : yearGraduated.hasError }">
										  <select class="data-input form-control" data-bind="options: years,
																		                     value: yearGraduated,
																		                     valueAllowUnset: true"></select>
										</div>
									</td>
									<td>
						 				<a href="#remove" class="remove-record" data-bind="click: $root.removeEducation"><span class="glyphicon glyphicon-remove"></span></a>
						 			</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>

			<div class="panel-group" id="misc-info-accordion">
				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title"><a data-toggle="collapse" data-parent="#misc-info-accordion" href="#misc-info-pane">Miscellaneous</a></h3>
					</div>

					<div id="misc-info-pane" class="panel-collapse collapse fade in">
						<div class="panel-body">
							<div class="row field-row">
								<div class="col-md-3">
									<p class="bold">Passport No.</p>
									<input type="text" class="data-input form-control" placeholder="Passport number..." data-bind="value: passportNo, valueUpdate: 'afterkeydown'">
								</div>
								<div class="col-md-9">
									
								</div>
							</div>

							<div class="row field-row leading-row field-last-row">
								<div class="col-md-3">
									<p class="bold">Date Baptized</p>
									<input type="text" class="data-input form-control" placeholder="Date baptized..." data-bind="value: dateBaptized, valueUpdate: 'afterkeydown'">
								</div>
								<div class="col-md-3">
									<p class="bold">Baptismal Location</p>
									<div class="form-group" data-bind="css: { 'has-error' : baptismalLocality.hasError }">
										<select class="data-input form-control" data-bind="options: localities,
																						   optionsText: function(locality) {
																								return locality.locality;
																						    },
																						   optionsValue: function(locality) {
																									return locality.id;
																						    },
																	                       value: baptismalLocality,
																	                       valueAllowUnset: true"></select>
									</div>
								</div>
								<div class="col-md-6">
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<a href="#save-changes-trainee" class="btn btn-primary pull-right save-button" data-loading-text="Saving updates..." data-bind="click: save">Save Changes</a>
			<?php
				if (isset($user)) {
					if (isset($user['Role'])) {
						if ($user['Role'] == SUPER_USER_ROLE ||
							$user['Role'] == ADMIN_ROLE) {
							?>
								<a href="#trainee-list" class="btn btn-default pull-right" data-bind="click: goToList">Trainee List</a>
							<?php
						}
					}
				}
			?>
		</div>
		<!--
		<div class="col-md-1">
		</div>
		-->
	</div>